<template>
  <div class="container mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">{{ AboutUs?.title }}</h2>
      <div class="w-20 h-1 bg-indigo-600 mx-auto mb-6"></div>
      <p class="text-gray-600 max-w-3xl mx-auto">
        {{ AboutUs?.desc_title }}
      </p>
    </div>

    <div class="flex flex-col lg:flex-row items-center gap-12">
      <div class="lg:w-1/2">
        <img :src="AboutUs?.image_url" alt="关于我们" class="rounded-xl shadow-xl w-full object-contain"
          style="max-height: 400px; object-fit: cover;">
      </div>

      <div class="lg:w-1/2">
        <h3 class="text-2xl font-semibold text-gray-800 mb-6">我们的故事</h3>
        <p class="text-gray-600 mb-6">
          {{ AboutUs?.desc1 }}
        </p>
        <p class="text-gray-600 mb-8">
          {{ AboutUs?.desc2 }}
        </p>

        <div class="grid grid-cols-2 gap-6">
          <div v-for="(stat, index) in AboutUs?.stats" :key="index"
            class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-md transition-shadow">
            <p class="text-3xl font-bold text-indigo-600 mb-2">{{ stat.title }}</p>
            <p class="text-gray-600">{{ stat.value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { AboutUs } from "~/types/page-admin"

const props = defineProps<{
  AboutUs?: AboutUs
}>();
const stats = [
  { value: '10+', label: '年行业经验' },
  { value: '500+', label: '服务客户' },
  { value: '50+', label: '专业团队' },
  { value: '99%', label: '客户满意度' }
]
</script>
